---
title: Островки Astro
description: Узнайте, как архитектура островков Astro помогает сохранять сайты быстрыми.
i18nReady: true
---

import IslandsDiagram from '~/components/IslandsDiagram.astro';
import ReadMore from '~/components/ReadMore.astro';

Astro является пионером и популяризатором фронтенд-архитектуры под названием **Островки**. Архитектура островков обеспечивает более высокую производительность фронтенда, помогая вам избежать монолитных паттернов JavaScript и автоматически удаляя весь несущественный JavaScript со страницы. Разработчики могут продолжать использовать свои любимые компоненты UI и фреймворки с Astro, получая все эти преимущества.

## Краткая история

Термин «компонентный островок» был впервые предложен фронтенд-архитектором Etsy [Кэти Сайлор-Миллер](https://sylormiller.com/) в 2019 году. Затем эта идея была развита и задокументирована в [этом посте](https://jasonformat.com/islands-architecture/) создателем Preact Джейсоном Миллером 11 августа 2020 года.

> Общая идея архитектуры «островков» обманчиво проста: рендерите HTML-страницы на сервере и вставляйте заполнители или слоты вокруг высокодинамичных областей [...], которые затем могут быть «гидрированы» на клиенте в небольшие автономные виджеты, повторно используя их исходный HTML, рендеримый на сервере. 
> — Джейсон Миллер, создатель Preact

Техника, на которой основан этот архитектурный паттерн, также известна как **частичная** или **селективная гидратация**.

В отличие от этого, большинство веб-фреймворков на базе JavaScript гидратируют и рендерят весь веб-сайт как одно большое JavaScript-приложение (также известное как одностраничное приложение, или SPA). SPA обеспечивают простоту и мощность, но страдают от проблем с производительностью загрузки страниц из-за интенсивного использования JavaScript на стороне клиента.

SPA занимают свое место, даже [встроенные в страницу Astro](/ru/guides/migrate-to-astro/from-create-react-app/). Однако SPA лишены встроенной возможности селективной и стратегической гидратации, что делает их тяжелым выбором для большинства современных веб-проектов.

Astro стал популярен как первый мейнстримовый JavaScript-фреймворк со встроенной выборочной гидратацией, использующий тот же паттерн компонентных островков, впервые введённый Сайлор-Миллер. С тех пор мы расширили и развили оригинальную работу Сайлор-Миллер, которая послужила вдохновением для аналогичного подхода с компонентным островком для динамически серверного рендеринга контента.

## Что такое островок?

В Astro островок – это улучшенный UI-компонент на в остальном статичной HTML-странице.

[**Клиентский островок**](#клиентские-островки) — это интерактивный JavaScript UI-компонент, который гидратируется отдельно от остальной части страницы, в то время как [**серверный островок**](#серверные-островки) — это UI-компонент, который серверно рендерит своё динамическое содержимое отдельно от остальной части страницы.

Оба островка выполняют ресурсоёмкие или медленные процессы независимо, для каждого компонента отдельно, что позволяет оптимизировать загрузку страницы.

## Компонентные островки

Компоненты Astro — это строительные блоки шаблона вашей страницы. Они рендерятся в статический HTML без клиентского выполнения.

Представьте себе клиентский островок как интерактивный виджет, плавающий в океане в остальном статичного, лёгкого, серверного HTML. Серверные островки могут добавляться для персонализированных или динамических серверно рендеренных элементов, например, для отображения изображения профиля вошедшего пользователя.

<IslandsDiagram>
  <Fragment slot="headerApp">Шапка (интерактивный островок)</Fragment>
  <Fragment slot="sidebarApp">Сайдбар (статичный HTML)</Fragment>
  <Fragment slot="main">
    Статичный контент с текстом, картинками и т. д.
  </Fragment>
  <Fragment slot="carouselApp">Карусель изображений (интерактивный островок)</Fragment>
  <Fragment slot="footer">Подвал (статичный HTML)</Fragment>
  <Fragment slot="source">Источник: [Islands Architecture: Jason Miller](https://jasonformat.com/islands-architecture/)</Fragment>
</IslandsDiagram>

Островок всегда работает изолированно от других островков на странице, и на странице может существовать несколько островков. Островки могут обмениваться состоянием и взаимодействовать друг с другом, даже если они работают в разных контекстах компонентов.

Такая гибкость позволяет Astro поддерживать множество UI-фреймворков, таких как [React](https://react.dev/), [Preact](https://preactjs.com/), [Svelte](https://svelte.dev/), [Vue](https://vuejs.org/) и [SolidJS](https://www.solidjs.com/). Поскольку они независимы, вы можете даже смешивать несколько фреймворков на одной странице.

:::tip
Хотя большинство разработчиков придерживаются только одного UI-фреймворка, Astro поддерживает несколько фреймворков в одном проекте. Это позволяет вам:

- Выбрать фреймворк, который лучше всего подходит для каждого компонента.
- Изучать новый фреймворк без необходимости начинать новый проект.
- Сотрудничать с другими людьми, даже работая в разных фреймворках.
- Постепенно переводить существующий сайт на другой фреймворк без простоя.
:::

## Клиентские островки

По умолчанию Astro автоматически переводит каждый компонент UI в HTML и CSS, **убирая весь JavaScript на стороне клиента**.


```astro title="src/pages/index.astro"
<MyReactComponent />
```

Это может показаться строгим, но именно такое поведение по умолчанию обеспечивает быстродействие сайтов Astro и защищает разработчиков от случайной отправки ненужного или нежелательного JavaScript, который может замедлить работу их сайта.

Для превращения любого статичного компонента пользовательского интерфейса в интерактивный островок требуется только директива `client:*`. Затем Astro автоматически собирает и упаковывает ваш JavaScript на стороне клиента для оптимизации производительности.

```astro title="src/pages/index.astro" ins="client:load"
<!-- Теперь этот компонент интерактивен на странице! 
     Остальная часть вашего сайта остается статичной. -->
<MyReactComponent client:load />
```

При использовании островков клиентский JavaScript загружается только для явно интерактивных компонентов, которые вы отмечаете с помощью директив `client:*`.

А поскольку взаимодействие настраивается на уровне компонентов, вы можете устанавливать различные приоритеты загрузки для каждого компонента в зависимости от его использования. Например, `client:idle` указывает компоненту загружаться, когда браузер простаивает, а `client:visible` указывает компоненту загружаться только после того, как он попадает в область видимости.

<h3>Преимущества клиентских островков</h3>

Наиболее очевидным преимуществом создания сайта с помощью островков Astro является производительность: большая часть вашего сайта преобразуется в быстрый, статичный HTML, а JavaScript загружается только для отдельных компонентов, которым он необходим. JavaScript — один из самых медленных ресурсов, которые можно загружать побайтно, поэтому каждый байт имеет значение.

Ещё одно преимущество — параллельная загрузка. На приведенной выше иллюстрации низкоприоритетному островку «карусель изображений» не нужно блокировать высокоприоритетный островок «шапка». Оба загружаются параллельно и гидратируются изолированно, что означает, что заголовок становится интерактивным немедленно, не дожидаясь более тяжелой карусели, расположенной ниже на странице.

Что ещё лучше, вы можете указать Astro, как и когда именно отображать каждый компонент. Если карусель изображений требует долгой загрузки, вы можете подключить специальную [директиву `client`](/ru/reference/directives-reference/#client-directives), которая скажет Astro загружать карусель только тогда, когда она становится видимой на странице. Если пользователь её никогда не увидит, она и не загрузится.

В Astro именно вы, как разработчик, должны явно указать, какие компоненты на странице должны также работать в браузере. Astro выполнит гидратацию только тех компонентов, которые действительно необходимы на странице, а остальную часть сайта оставит в виде статичного HTML.

**Клиентские островки — это секрет успеха производительности Astro «по умолчанию»!**

<ReadMore>Подробнее об [использовании компонентов JavaScript-фреймворков](/ru/guides/framework-components/) в вашем проекте.</ReadMore>

## Серверные островки

Серверные островки позволяют вынести ресурсоёмкий или медленный серверный код из основного процесса рендеринга, что упрощает сочетание высокопроизводительного статичного HTML и динамических компонентов, генерируемых сервером.

Добавьте директиву [`server:defer`](/ru/reference/directives-reference/#server-directives) к любому компоненту Astro на странице, чтобы превратить его в отдельный серверный островок:

```astro title="src/pages/index.astro" "server:defer"
---
import Avatar from "../components/Avatar.astro";
---
<Avatar server:defer />
```

Это разбивает вашу страницу на небольшие области с серверно рендеренным контентом, каждая из которых загружается параллельно.

Основное содержимое вашей страницы может быть отрендерено мгновенно с использованием заполнительного контента, например, универсального аватара, пока содержимое островка не станет доступным. Благодаря серверным островкам наличие небольших компонентов с персонализированным контентом не замедляет рендеринг в остальном статичной страницы.

Эта схема рендеринга разработана таким образом, чтобы быть переносимой. Она не зависит от какой-либо серверной инфраструктуры, поэтому будет работать с любым хостом — от сервера Node.js в контейнере Docker до выбранной вами платформы бессерверных решений.

<h3>Преимущества серверных островков</h3>

Одним из преимуществ серверных островков является возможность динамического рендеринга наиболее изменяемых частей страницы на лету. Это позволяет внешней оболочке и основному контенту агрессивнее кэшироваться, обеспечивая более высокую производительность.

Другое преимущество — улучшенный пользовательский опыт. Серверные островки оптимизированы и загружаются быстро, часто ещё до того, как браузер успевает отобразить страницу. Но в течение короткого времени, пока островки рендерятся, можно показывать запасной контент, предотвращая сдвиги макета.

Пример сайта, который выигрывает от серверных островков Astro, — это витрина интернет-магазина. Хотя основной контент страниц товаров изменяется редко, на этих страницах обычно присутствуют динамические элементы:

- Аватар пользователя в шапке.
- Специальные предложения и скидки на товар.
- Отзывы пользователей.

Используя серверные островки для этих элементов, ваш посетитель сразу увидит самую важную часть страницы — товар. Универсальные аватары, индикаторы загрузки и объявления магазина могут быть отображены как запасной контент, пока персонализированные данные не станут доступны.

<ReadMore>Подробнее об [использовании серверных островков](/ru/guides/server-islands/) в вашем проекте.</ReadMore>
